<template>
	<view @click="isChangeTheme.open()">
		<slot></slot>
	</view>
	<myPopupVue ref="isChangeTheme" >
		<view class="changeTheme" >
			<view class="popup_title">
				切换主题:
			</view>
			<radio-group @change="radioChange" class="changeTheme_chooseBox">
				<label class="changeTheme_chooseBox_one" v-for="item in tagList" :key="item">
					<radio class="changeTheme_chooseBox_one_radio" :value="item.value" />
					<radioIconVue :isShow="item.value===theTag"/>
					<view class="changeTheme_chooseBox_one_text">{{item.text}}</view>
				</label>
			</radio-group>
			<view class="changeTheme_button" @click="chooseTheTag">
				确定
			</view>
		</view>
	</myPopupVue>
</template>

<script setup>
	import radioIconVue from '@/components/setting/radioIcon.vue';
	import myPopupVue from '@/components/base/myPopup.vue';
	import {
		ref
	} from "vue"
	import store from "@/store/index.js"
	import {handleLoad} from "@/uitls/tool.js"
	const isChangeTheme = ref()
	const tagList = [{
			text: "白天",
			value: "light"
		},
		{
			text: "夜间",
			value: "dark"
		},
		{
			text: "自动",
			value: "auto"
		},
	]
	const theTag = ref()
	const radioChange = (x) => {
		theTag.value = x.detail.value
	}
	const chooseTheTag=()=>{
		isChangeTheme.value.close()
		// #ifdef APP-PLUS
		plus.nativeUI.setUIStyle(theTag.value)
		if(theTag.value=="auto"){
			store.commit("getSystemInfo")
			handleLoad("")
		}	
		// #endif
		// 在App.vue 中监听 主题切换
		// 采用了 删除刷新 的方法 做到了 统计页的刷新 但 刷新带来了卡顿
	}
</script>

<style lang="scss" scoped>
	@import "@/style/base.scss";

	.changeTheme {
		padding: 1em;
		padding-top: 0;
		width:$basePopupWidth;
		.changeTheme_chooseBox {
			&_one {
				line-height: 2em;
				display: flex;
				align-items: center;

				&_radio {
					display: none;
				}
				&_text {
				}
			}
		}

		&_button {
			margin-top: 1em;
			color: $baseBlack_mid;
			font-weight: bold;
			text-align: right;
		}
	}
</style>